<template>
  <div class="plugin">
    <el-table stripe border :data="tableData" v-loading="tableLoading">
      <el-table-column label="插件名称" align="center" prop="name" min-width="20%"></el-table-column>
      <el-table-column label="版本" align="center" prop="version" min-width="10%"></el-table-column>
      <el-table-column label="类型" prop="type" align="center" min-width="10%"></el-table-column>
      <el-table-column label="状态" prop="active" align="center" min-width="10%">
        <template v-slot="{ row }">
            <el-tag :type="row.active===false?'info':'success'">{{row.active===false?'已停止':'运行中'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" min-width="40%"></el-table-column>
      <el-table-column label="操作" min-width="10%"></el-table-column>
    </el-table>
  </div>
</template> 

<script>
export default {
  name: "Plugin",
  data(){
    return{
      tableData: [],
      tableLoading: false,
    }
  },
  methods: {
    // 根据当前页&每页展示条数，从服务器获取列表数据
    async init() {
      this.tableLoading = true;
      try {
        let { code,data } = await this.$http.plugin.plugins();
        if (code === 0) {
          this.tableData = data[0].plugins;
        } else {
          this.tableData = [];
        }
      } catch (_) {
        _;
      }
      this.tableLoading = false;
    },
  },
  created(){
    this.init()
  }
};
</script>

<style lang="less" scoped>
.plugin {
  width: 100%;
  margin: 10px;
}
.el-table {
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 15px 20px 20px 20px;
  box-sizing: border-box;
}
</style>